shiny.semantic

Semantic UI wrapper for Shiny

With this library it’s easy to wrap Shiny with Semantic UI components. Add few simple CSS classes to your components and achieve amazing boost look of your user interface.

Before

Client's info

Name City Revenue
John Smith Warsaw, Poland $210.50
Lindsay More SF, United States $172.78

After

Client's info

Name City Revenue
John Smith Warsaw, Poland $210.50
Lindsay More SF, United States $172.78

Components live demo

For better understanding it’s good to check Semantic UI documentation.

Source code

This library source code can be found on Appsilon Data Science’s Github:
https://github.com/Appsilon/shiny.semantic

How to install?

Note! This library is still in its infancy. Api might change in the future.

At the moment it’s possible to install this library through devtools.

devtools::install_github("Appsilon/shiny.semantic")

To install previous version you can run:

devtools::install_github("Appsilon/shiny.semantic", ref = "0.1.0")

How to use it?

TODO Chris - write how to initialse all necessary things in shinyServer and ui.
TODO Chris - write about invoking specific components JS, found in Semantic UI documentation.

div(class = "ui button", uiicon("user"), "Icon button")


div(class = "ui raised segment", div(class = "ui relaxed divided list", c("Apples", 
    "Pears", "Oranges") %>% purrr::map(~div(class = "item", uiicon("large github middle aligned"), 
    div(class = "content", a(class = "header", "Hello"), div(class = "description", 
        .))))))


div(class = "ui card", div(class = "content", div(class = "right floated meta", "14h"), 
    img(class = "ui avatar image", src = "http://semantic-ui.com/images/avatar/large/elliot.jpg"), 
    "Elliot"), div(class = "image", img(src = "http://semantic-ui.com/images/wireframe/image.png")), 
    div(class = "content", span(class = "right floated", uiicon("heart outline like"), 
        "17 likes"), uiicon("comment"), "3 comments"), div(class = "extra content", 
        div(class = "ui large transparent left icon input", uiicon("heart ouline"), 
            tags$input(type = "text", placeholder = "Add Comment..."))))

More examples

The source code for the live demo you were able to go to in the bigging is located in /examples folder. To run it locally you will have to install:

  • highlighter

    devtools::install_github("Appsilon/highlighter")

Check out our dashboard examples:

  1. Churn analytics
  2. Fraud detection

All dashboards source code can be found in /demo folder. You will have to follow the according README files to install all necessary dependencies for those projects.

How to contribute?

If you want to contribute to this project please submit a regular PR, once you’re done with new feature or bug fix.

Changes in documentation

Both repository README.md file and an official documentation page are generated with Rmarkdown, so if there is a need to update them, please modify accordingly a README.Rmd file and run a build_readme.R script to compile it.

Troubleshooting

We used the latest versions of dependencies for this library, so please update your R environment before installation.

However, if you encounter any problems, try the following:

  1. Up-to-date R language environment
  2. Installing specific dependent libraries versions

    • shiny

      install.packages("shiny", version='0.14.2.9001')
  3. Some bugs may be realted directly to Semantic UI. In that case please try to check issues on its repository.

Future enhacements

  • create all update functions for input components to mimic shiny as close as possible
  • add some glue code in dsl.R to make using this package smoother
  • CRAN release